<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>在线考试系统 - 多题型支持</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: 'Microsoft YaHei', sans-serif;
        }

        body {
            background-color: #f5f7fa;
            color: #333;
            line-height: 1.6;
        }

        .container {
            max-width: 1200px;
            margin: 0 auto;
            padding: 20px;
        }

        header {
            background: linear-gradient(135deg, #4b6cb7 0%, #182848 100%);
            color: white;
            padding: 15px 20px;
            border-radius: 10px;
            margin-bottom: 20px;
            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
        }

        .exam-info {
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

        .exam-title {
            font-size: 24px;
            font-weight: bold;
        }

        .exam-meta {
            display: flex;
            gap: 20px;
        }

        .timer {
            background: #ff6b6b;
            padding: 8px 15px;
            border-radius: 20px;
            font-weight: bold;
            display: flex;
            align-items: center;
            gap: 5px;
        }

        .main-content {
            display: flex;
            gap: 20px;
        }

        .left-sidebar {
            flex: 1;
            background: white;
            border-radius: 10px;
            padding: 20px;
            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
            max-height: 80vh;
            overflow-y: auto;
        }

        .question-nav {
            margin-bottom: 20px;
        }

        .nav-title {
            font-size: 18px;
            font-weight: bold;
            margin-bottom: 15px;
            padding-bottom: 10px;
            border-bottom: 2px solid #eee;
        }

        .question-grid {
            display: grid;
            grid-template-columns: repeat(5, 1fr);
            gap: 10px;
        }

        .question-number {
            width: 40px;
            height: 40px;
            display: flex;
            align-items: center;
            justify-content: center;
            background: #f0f4ff;
            border-radius: 5px;
            cursor: pointer;
            transition: all 0.3s;
            border: 1px solid #dde1f2;
            position: relative;
        }

        .question-number:hover {
            background: #4b6cb7;
            color: white;
        }

        .question-number.active {
            background: #4b6cb7;
            color: white;
            font-weight: bold;
        }

        .question-number.answered {
            background: #5cb85c;
            color: white;
        }

        .question-number.marked {
            background: #f0ad4e;
            color: white;
        }

        .question-number.marked::after {
            content: '●';
            position: absolute;
            top: -5px;
            right: -5px;
            font-size: 14px;
        }

        .question-type-filter {
            margin: 15px 0;
            display: flex;
            flex-wrap: wrap;
            gap: 10px;
        }

        .type-filter-btn {
            padding: 6px 12px;
            background: #e9ecef;
            border: none;
            border-radius: 15px;
            cursor: pointer;
            font-size: 13px;
            transition: all 0.3s;
        }

        .type-filter-btn.active {
            background: #4b6cb7;
            color: white;
        }

        .exam-progress {
            margin-top: 20px;
        }

        .progress-bar {
            height: 10px;
            background: #f0f4ff;
            border-radius: 5px;
            margin-top: 10px;
            overflow: hidden;
        }

        .progress-fill {
            height: 100%;
            background: #5cb85c;
            width: 35%;
            transition: width 0.5s;
        }

        .question-content {
            flex: 3;
            background: white;
            border-radius: 10px;
            padding: 25px;
            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
            max-height: 80vh;
            overflow-y: auto;
        }

        .question-header {
            display: flex;
            justify-content: space-between;
            margin-bottom: 20px;
            padding-bottom: 15px;
            border-bottom: 2px solid #eee;
        }

        .question-title {
            font-size: 20px;
            font-weight: bold;
        }

        .question-type {
            color: #4b6cb7;
            font-weight: bold;
            padding: 4px 10px;
            background: #f0f4ff;
            border-radius: 4px;
        }

        .question-text {
            font-size: 18px;
            margin-bottom: 25px;
            line-height: 1.8;
        }

        .options {
            margin-bottom: 30px;
        }

        .option {
            display: flex;
            align-items: flex-start;
            margin-bottom: 15px;
            padding: 12px 15px;
            border: 1px solid #eee;
            border-radius: 8px;
            transition: all 0.3s;
        }

        .option:hover {
            background: #f9fafd;
            border-color: #dde1f2;
        }

        .option input {
            margin-right: 15px;
            margin-top: 4px;
            cursor: pointer;
        }

        .option label {
            cursor: pointer;
            flex: 1;
        }

        .true-false-options {
            display: flex;
            gap: 15px;
            margin-bottom: 30px;
        }

        .true-false-btn {
            flex: 1;
            padding: 15px;
            border: 2px solid #e9ecef;
            border-radius: 8px;
            background: white;
            cursor: pointer;
            text-align: center;
            font-weight: bold;
            transition: all 0.3s;
        }

        .true-false-btn:hover {
            border-color: #4b6cb7;
            background: #f0f4ff;
        }

        .true-false-btn.selected {
            border-color: #4b6cb7;
            background: #4b6cb7;
            color: white;
        }

        .essay-answer {
            width: 100%;
            min-height: 150px;
            padding: 15px;
            border: 1px solid #ddd;
            border-radius: 8px;
            font-size: 16px;
            resize: vertical;
            margin-bottom: 30px;
        }

        .essay-answer:focus {
            outline: none;
            border-color: #4b6cb7;
            box-shadow: 0 0 0 2px rgba(75, 108, 183, 0.2);
        }

        .navigation-buttons {
            display: flex;
            justify-content: space-between;
            margin-top: 30px;
            gap: 15px;
        }

        .btn-group {
            display: flex;
            gap: 12px;
        }

        .btn {
            padding: 12px 24px;
            border: none;
            border-radius: 6px;
            cursor: pointer;
            font-weight: bold;
            transition: all 0.3s;
            display: flex;
            align-items: center;
            gap: 8px;
            font-size: 15px;
            min-width: 120px;
            justify-content: center;
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
        }

        .btn-sm {
            padding: 10px 18px;
            min-width: 100px;
            font-size: 14px;
        }

        .btn-lg {
            padding: 14px 28px;
            min-width: 140px;
            font-size: 16px;
        }

        .btn-primary {
            background: #4b6cb7;
            color: white;
        }

        .btn-primary:hover {
            background: #3a559d;
            transform: translateY(-2px);
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
        }

        .btn-primary:active {
            transform: translateY(0);
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
        }

        .btn-success {
            background: #5cb85c;
            color: white;
        }

        .btn-success:hover {
            background: #449d44;
            transform: translateY(-2px);
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
        }

        .btn-success:active {
            transform: translateY(0);
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
        }

        .btn-outline {
            background: transparent;
            border: 2px solid #4b6cb7;
            color: #4b6cb7;
        }

        .btn-outline:hover {
            background: #4b6cb7;
            color: white;
            transform: translateY(-2px);
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
        }

        .btn-outline:active {
            transform: translateY(0);
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
        }

        .btn-warning {
            background: #f0ad4e;
            color: white;
        }

        .btn-warning:hover {
            background: #ec971f;
            transform: translateY(-2px);
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
        }

        .btn-warning:active {
            transform: translateY(0);
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
        }

        .btn:disabled {
            opacity: 0.6;
            cursor: not-allowed;
            transform: none !important;
            box-shadow: none !important;
        }

        .btn:disabled:hover {
            opacity: 0.6;
            transform: none;
            box-shadow: none;
        }

        footer {
            text-align: center;
            margin-top: 30px;
            color: #777;
            font-size: 14px;
        }

        .modal {
            display: none;
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0, 0, 0, 0.5);
            justify-content: center;
            align-items: center;
            z-index: 1000;
        }

        .modal-content {
            background: white;
            padding: 30px;
            border-radius: 10px;
            max-width: 500px;
            width: 100%;
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
        }

        .modal-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 20px;
            padding-bottom: 15px;
            border-bottom: 1px solid #eee;
        }

        .modal-title {
            font-size: 24px;
            font-weight: bold;
            color: #4b6cb7;
        }

        .close-btn {
            background: none;
            border: none;
            font-size: 24px;
            cursor: pointer;
            color: #777;
            padding: 5px;
            border-radius: 50%;
            width: 36px;
            height: 36px;
            display: flex;
            align-items: center;
            justify-content: center;
            transition: background 0.3s;
        }

        .close-btn:hover {
            background: #f5f5f5;
        }

        .modal-body {
            margin-bottom: 25px;
            font-size: 18px;
        }

        .modal-footer {
            display: flex;
            justify-content: flex-end;
            gap: 15px;
        }

        .btn-danger {
            background: #d9534f;
            color: white;
        }

        .btn-danger:hover {
            background: #c9302c;
            transform: translateY(-2px);
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
        }

        .btn-danger:active {
            transform: translateY(0);
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
        }

        .question-count {
            font-size: 14px;
            color: #6c757d;
            margin-top: 5px;
        }

        @media (max-width: 900px) {
            .main-content {
                flex-direction: column;
            }

            .question-grid {
                grid-template-columns: repeat(4, 1fr);
            }

            .exam-meta {
                flex-direction: column;
                gap: 10px;
            }

            .navigation-buttons {
                flex-direction: column;
            }

            .btn-group {
                justify-content: center;
                width: 100%;
            }

            .btn {
                flex: 1;
            }

            .left-sidebar,
            .question-content {
                max-height: none;
            }
        }

        @media (max-width: 600px) {
            .btn-group {
                flex-direction: column;
            }

            .btn {
                width: 100%;
            }

            .question-grid {
                grid-template-columns: repeat(3, 1fr);
            }

            .true-false-options {
                flex-direction: column;
            }
        }
    </style>
</head>

<body>
    <div class="container">
        <header>
            <div class="exam-info">
                <div class="exam-title">期末考试 - 计算机科学</div>
                <div class="exam-meta">
                    <div class="student-info">考生: 张三 (20210001)</div>
                    <div class="timer">
                        <i class="fas fa-clock"></i>
                        <span id="time">01:29:35</span>
                    </div>
                </div>
            </div>
        </header>

        <div class="main-content">
            <div class="left-sidebar">
                <div class="question-nav">
                    <div class="nav-title">题目导航</div>

                    <div class="question-type-filter">
                        <button class="type-filter-btn active" data-type="all">全部</button>
                        <button class="type-filter-btn" data-type="single">单选题</button>
                        <button class="type-filter-btn" data-type="multiple">多选题</button>
                        <button class="type-filter-btn" data-type="judge">判断题</button>
                        <button class="type-filter-btn" data-type="essay">简答题</button>
                    </div>

                    <div class="question-grid" id="questionGrid">
                        <!-- 题目导航将由JS生成 -->
                    </div>
                </div>

                <div class="exam-progress">
                    <div class="nav-title">完成进度</div>
                    <div class="progress-bar">
                        <div class="progress-fill" id="progressFill"></div>
                    </div>
                    <div id="progressText">已完成: 0% (0/20)</div>
                </div>
            </div>

            <div class="question-content">
                <div class="question-header">
                    <div class="question-title" id="questionTitle">题目 #1</div>
                    <div class="question-type" id="questionType">单选题 (2分)</div>
                </div>

                <div class="question-text" id="questionText">
                    <p>下列哪项不是JavaScript的基本数据类型？</p>
                </div>

                <div id="answerContainer">
                    <!-- 答题区域将由JS生成 -->
                </div>

                <div class="navigation-buttons">
                    <button class="btn btn-outline btn-lg" id="prevBtn">
                        <i class="fas fa-arrow-left"></i> 上一题
                    </button>

                    <div class="btn-group">
                        <button class="btn btn-warning btn-sm" id="markBtn">
                            <i class="fas fa-flag"></i> 标记题目
                        </button>
                        <button class="btn btn-primary btn-sm" id="nextBtn">
                            下一题 <i class="fas fa-arrow-right"></i>
                        </button>
                    </div>

                    <button class="btn btn-success btn-lg" id="submitBtn">
                        提交答案 <i class="fas fa-check"></i>
                    </button>
                </div>
            </div>
        </div>

        <footer>
            <p>© 2023 在线考试系统 | 确保考试公平公正</p>
        </footer>
    </div>

    <!-- 提交确认模态框 -->
    <div class="modal" id="submitModal">
        <div class="modal-content">
            <div class="modal-header">
                <h2 class="modal-title">确认提交</h2>
                <button class="close-btn" id="closeModal">&times;</button>
            </div>
            <div class="modal-body">
                <p>您确定要提交试卷吗？提交后将无法修改答案。</p>
                <p>已完成: <span id="answeredCount">0</span>/20题</p>
                <p>已标记: <span id="markedCount">0</span>题</p>
            </div>
            <div class="modal-footer">
                <button class="btn btn-outline" id="cancelSubmit">取消</button>
                <button class="btn btn-danger" id="confirmSubmit">确认提交</button>
            </div>
        </div>
    </div>

    <!-- 考试结束模态框 -->
    <div class="modal" id="finishModal">
        <div class="modal-content">
            <div class="modal-header">
                <h2 class="modal-title">考试结束</h2>
            </div>
            <div class="modal-body">
                <p>您已成功提交试卷！</p>
                <p>最终成绩: <span id="finalScore">0</span>分</p>
                <p>答题情况: <span id="finalAnswered">0</span>/20题</p>
                <p>用时: <span id="timeUsed">01:30:00</span></p>
            </div>
            <div class="modal-footer">
                <button class="btn btn-outline" id="reviewBtn">查看详情</button>
                <button class="btn btn-primary" id="closeExam">关闭</button>
            </div>
        </div>
    </div>

    <script>
        // 考试数据
        const examData = {
            "title": "期末考试 - 计算机科学",
            "student": "张三 (20210001)",
            "timeLimit": 90,
            "questions": [
                // 单选题
                {
                    "id": 1,
                    "type": "单选题",
                    "score": 2,
                    "text": "下列哪项不是JavaScript的基本数据类型？",
                    "options": ["Number", "String", "Boolean", "Array"],
                    "answer": 3
                },
                {
                    "id": 2,
                    "type": "单选题",
                    "score": 2,
                    "text": "CSS中用于设置元素外边框的属性是？",
                    "options": ["margin", "padding", "border", "outline"],
                    "answer": 0
                },
                {
                    "id": 9,
                    "type": "单选题",
                    "score": 2,
                    "text": "HTTP响应状态码200表示？",
                    "options": ["重定向", "客户端错误", "服务器错误", "成功"],
                    "answer": 3
                },
                {
                    "id": 10,
                    "type": "单选题",
                    "score": 2,
                    "text": "以下哪种不是HTML5新引入的语义化标签？",
                    "options": ["<section>", "<div>", "<article>", "<nav>"],
                    "answer": 1
                },
                {
                    "id": 13,
                    "type": "单选题",
                    "score": 2,
                    "text": "JavaScript中，以下哪个方法可以用于异步请求？",
                    "options": ["setTimeout()", "fetch()", "console.log()", "parseInt()"],
                    "answer": 1
                },
                {
                    "id": 17,
                    "type": "单选题",
                    "score": 2,
                    "text": "SQL中用于查询数据的语句是？",
                    "options": ["SELECT", "UPDATE", "INSERT", "DELETE"],
                    "answer": 0
                },

                // 多选题
                {
                    "id": 3,
                    "type": "多选题",
                    "score": 3,
                    "text": "以下哪些是CSS盒模型的组成部分？（多选）",
                    "options": ["内容(content)", "内边距(padding)", "外边距(margin)", "边框(border)"],
                    "answer": [0, 1, 2, 3]
                },
                {
                    "id": 4,
                    "type": "多选题",
                    "score": 3,
                    "text": "以下哪些是JavaScript的基本数据类型？（多选）",
                    "options": ["Number", "String", "Object", "Boolean", "Array"],
                    "answer": [0, 1, 3]
                },
                {
                    "id": 11,
                    "type": "多选题",
                    "score": 3,
                    "text": "以下哪些是版本控制工具？（多选）",
                    "options": ["Git", "SVN", "Webpack", "Mercurial"],
                    "answer": [0, 1, 3]
                },
                {
                    "id": 14,
                    "type": "多选题",
                    "score": 3,
                    "text": "以下哪些是前端框架？（多选）",
                    "options": ["React", "Vue", "Angular", "Django"],
                    "answer": [0, 1, 2]
                },
                {
                    "id": 18,
                    "type": "多选题",
                    "score": 3,
                    "text": "以下哪些是数据库管理系统？（多选）",
                    "options": ["MySQL", "MongoDB", "Photoshop", "PostgreSQL"],
                    "answer": [0, 1, 3]
                },

                // 判断题
                {
                    "id": 5,
                    "type": "判断题",
                    "score": 1,
                    "text": "HTML是一种编程语言。",
                    "answer": 0
                },
                {
                    "id": 6,
                    "type": "判断题",
                    "score": 1,
                    "text": "CSS可以用来设置网页元素的样式。",
                    "answer": 1
                },
                {
                    "id": 12,
                    "type": "判断题",
                    "score": 1,
                    "text": "React是由Facebook开发的JavaScript库。",
                    "answer": 1
                },
                {
                    "id": 15,
                    "type": "判断题",
                    "score": 1,
                    "text": "CSS Flexbox是一种二维布局模型。",
                    "answer": 0
                },
                {
                    "id": 19,
                    "type": "判断题",
                    "score": 1,
                    "text": "Node.js是一个JavaScript运行时环境。",
                    "answer": 1
                },

                // 简答题
                {
                    "id": 7,
                    "type": "简答题",
                    "score": 5,
                    "text": "简述JavaScript中let、const和var声明的区别。",
                    "answer": ""
                },
                {
                    "id": 8,
                    "type": "简答题",
                    "score": 5,
                    "text": "解释什么是闭包，并举例说明其用途。",
                    "answer": ""
                },
                {
                    "id": 16,
                    "type": "简答题",
                    "score": 5,
                    "text": "解释什么是响应式设计，并列举实现响应式设计的常用方法。",
                    "answer": ""
                },
                {
                    "id": 20,
                    "type": "简答题",
                    "score": 5,
                    "text": "简述RESTful API的设计原则。",
                    "answer": ""
                }
            ]
        };

        // 考试状态
        const examState = {
            currentQuestion: 0,
            answers: Array(examData.questions.length).fill(null),
            marked: Array(examData.questions.length).fill(false),
            startTime: Date.now(),
            timeRemaining: examData.timeLimit * 60,
            filteredType: "all"
        };

        // DOM元素
        const questionGrid = document.getElementById('questionGrid');
        const questionTitle = document.getElementById('questionTitle');
        const questionType = document.getElementById('questionType');
        const questionText = document.getElementById('questionText');
        const answerContainer = document.getElementById('answerContainer');
        const prevBtn = document.getElementById('prevBtn');
        const nextBtn = document.getElementById('nextBtn');
        const markBtn = document.getElementById('markBtn');
        const submitBtn = document.getElementById('submitBtn');
        const progressFill = document.getElementById('progressFill');
        const progressText = document.getElementById('progressText');
        const timeDisplay = document.getElementById('time');
        const submitModal = document.getElementById('submitModal');
        const finishModal = document.getElementById('finishModal');
        const closeModal = document.getElementById('closeModal');
        const cancelSubmit = document.getElementById('cancelSubmit');
        const confirmSubmit = document.getElementById('confirmSubmit');
        const answeredCount = document.getElementById('answeredCount');
        const markedCount = document.getElementById('markedCount');
        const finalScore = document.getElementById('finalScore');
        const finalAnswered = document.getElementById('finalAnswered');
        const timeUsed = document.getElementById('timeUsed');
        const reviewBtn = document.getElementById('reviewBtn');
        const closeExam = document.getElementById('closeExam');
        const typeFilterBtns = document.querySelectorAll('.type-filter-btn');

        // 初始化题目导航
        function initQuestionNavigation() {
            questionGrid.innerHTML = '';
            examData.questions.forEach((question, index) => {
                const numberBtn = document.createElement('div');
                numberBtn.className = 'question-number';
                numberBtn.textContent = index + 1;
                numberBtn.dataset.type = getQuestionTypeCode(question.type);
                numberBtn.addEventListener('click', () => showQuestion(index));
                questionGrid.appendChild(numberBtn);
            });
        }

        // 获取题型代码
        function getQuestionTypeCode(type) {
            switch (type) {
                case "单选题": return "single";
                case "多选题": return "multiple";
                case "判断题": return "judge";
                case "简答题": return "essay";
                default: return "other";
            }
        }

        // 显示题目
        function showQuestion(index) {
            if (index < 0 || index >= examData.questions.length) return;

            examState.currentQuestion = index;
            const question = examData.questions[index];

            // 更新题目内容
            questionTitle.textContent = `题目 #${index + 1}`;
            questionType.textContent = `${question.type} (${question.score}分)`;
            questionText.innerHTML = `<p>${question.text}</p>`;

            // 生成答题区域
            answerContainer.innerHTML = '';

            if (question.type === '单选题' || question.type === '多选题') {
                const optionsDiv = document.createElement('div');
                optionsDiv.className = 'options';

                question.options.forEach((option, optIndex) => {
                    const optionDiv = document.createElement('div');
                    optionDiv.className = 'option';

                    const input = document.createElement('input');
                    input.type = question.type === '多选题' ? 'checkbox' : 'radio';
                    input.name = 'answer';
                    input.value = optIndex;
                    input.id = `option${optIndex}`;

                    // 设置选中状态
                    if (examState.answers[index] !== null) {
                        if (question.type === '多选题') {
                            input.checked = examState.answers[index].includes(optIndex);
                        } else {
                            input.checked = examState.answers[index] === optIndex;
                        }
                    }

                    input.addEventListener('change', () => saveAnswer(optIndex));

                    const label = document.createElement('label');
                    label.htmlFor = `option${optIndex}`;
                    label.textContent = `${String.fromCharCode(65 + optIndex)}. ${option}`;

                    optionDiv.appendChild(input);
                    optionDiv.appendChild(label);
                    optionsDiv.appendChild(optionDiv);
                });

                answerContainer.appendChild(optionsDiv);
            }
            else if (question.type === '判断题') {
                const tfOptionsDiv = document.createElement('div');
                tfOptionsDiv.className = 'true-false-options';

                const trueBtn = document.createElement('button');
                trueBtn.className = 'true-false-btn';
                trueBtn.textContent = '正确';
                if (examState.answers[index] === 1) {
                    trueBtn.classList.add('selected');
                }
                trueBtn.addEventListener('click', () => {
                    document.querySelectorAll('.true-false-btn').forEach(btn => {
                        btn.classList.remove('selected');
                    });
                    trueBtn.classList.add('selected');
                    saveAnswer(1);
                });

                const falseBtn = document.createElement('button');
                falseBtn.className = 'true-false-btn';
                falseBtn.textContent = '错误';
                if (examState.answers[index] === 0) {
                    falseBtn.classList.add('selected');
                }
                falseBtn.addEventListener('click', () => {
                    document.querySelectorAll('.true-false-btn').forEach(btn => {
                        btn.classList.remove('selected');
                    });
                    falseBtn.classList.add('selected');
                    saveAnswer(0);
                });

                tfOptionsDiv.appendChild(trueBtn);
                tfOptionsDiv.appendChild(falseBtn);
                answerContainer.appendChild(tfOptionsDiv);
            }
            else if (question.type === '简答题') {
                const textarea = document.createElement('textarea');
                textarea.className = 'essay-answer';
                textarea.placeholder = '请输入您的答案...';
                if (examState.answers[index] !== null) {
                    textarea.value = examState.answers[index];
                }
                textarea.addEventListener('input', (e) => {
                    saveAnswer(e.target.value);
                });

                answerContainer.appendChild(textarea);
            }

            // 更新导航按钮状态
            prevBtn.disabled = index === 0;
            nextBtn.disabled = index === examData.questions.length - 1;

            // 更新标记按钮状态
            updateMarkButton();

            // 更新题目导航状态
            updateQuestionNavigation();

            // 应用题型过滤
            applyTypeFilter();
        }

        // 更新标记按钮状态
        function updateMarkButton() {
            const index = examState.currentQuestion;
            markBtn.innerHTML = examState.marked[index]
                ? '<i class="fas fa-flag"></i> 取消标记'
                : '<i class="fas fa-flag"></i> 标记题目';
        }

        // 保存答案
        function saveAnswer(answer) {
            const currentIndex = examState.currentQuestion;
            const question = examData.questions[currentIndex];

            if (question.type === '多选题') {
                if (!examState.answers[currentIndex]) {
                    examState.answers[currentIndex] = [];
                }

                if (examState.answers[currentIndex].includes(answer)) {
                    // 取消选择
                    examState.answers[currentIndex] = examState.answers[currentIndex].filter(i => i !== answer);
                    if (examState.answers[currentIndex].length === 0) {
                        examState.answers[currentIndex] = null;
                    }
                } else {
                    // 添加选择
                    examState.answers[currentIndex].push(answer);
                }
            } else {
                // 单选题、判断题、简答题
                examState.answers[currentIndex] = answer;
            }

            // 更新进度
            updateProgress();
            updateQuestionNavigation();
        }

        // 标记题目
        function markQuestion() {
            const currentIndex = examState.currentQuestion;
            examState.marked[currentIndex] = !examState.marked[currentIndex];

            updateMarkButton();
            updateQuestionNavigation();
        }

        // 更新题目导航状态
        function updateQuestionNavigation() {
            const questionNumbers = document.querySelectorAll('.question-number');

            questionNumbers.forEach((number, index) => {
                number.classList.remove('active', 'answered', 'marked');

                if (index === examState.currentQuestion) {
                    number.classList.add('active');
                }

                if (examState.answers[index] !== null) {
                    number.classList.add('answered');
                }

                if (examState.marked[index]) {
                    number.classList.add('marked');
                }
            });
        }

        // 应用题型过滤
        function applyTypeFilter() {
            const questionNumbers = document.querySelectorAll('.question-number');

            questionNumbers.forEach(number => {
                if (examState.filteredType === 'all' || number.dataset.type === examState.filteredType) {
                    number.style.display = 'flex';
                } else {
                    number.style.display = 'none';
                }
            });
        }

        // 更新进度
        function updateProgress() {
            const answeredCount = examState.answers.filter(a => a !== null).length;
            const progress = (answeredCount / examData.questions.length) * 100;

            progressFill.style.width = `${progress}%`;
            progressText.textContent = `已完成: ${Math.round(progress)}% (${answeredCount}/${examData.questions.length})`;
        }

        // 显示上一题
        function showPrevQuestion() {
            showQuestion(examState.currentQuestion - 1);
        }

        // 显示下一题
        function showNextQuestion() {
            showQuestion(examState.currentQuestion + 1);
        }

        // 显示提交确认模态框
        function showSubmitModal() {
            const answeredCount = examState.answers.filter(a => a !== null).length;
            const markedCount = examState.marked.filter(m => m).length;

            document.getElementById('answeredCount').textContent = answeredCount;
            document.getElementById('markedCount').textContent = markedCount;

            submitModal.style.display = 'flex';
        }

        // 隐藏提交确认模态框
        function hideSubmitModal() {
            submitModal.style.display = 'none';
        }

        // 提交试卷
        function submitExam() {
            hideSubmitModal();

            // 计算得分
            let score = 0;
            examData.questions.forEach((question, index) => {
                if (examState.answers[index] !== null) {
                    if (question.type === '多选题') {
                        // 多选题需要完全匹配才得分
                        const correctCount = question.answer.length;
                        const answeredCount = examState.answers[index].length;
                        let correct = true;

                        for (let i = 0; i < correctCount; i++) {
                            if (!examState.answers[index].includes(question.answer[i])) {
                                correct = false;
                                break;
                            }
                        }

                        if (correct && answeredCount === correctCount) {
                            score += question.score;
                        }
                    } else if (question.type === '单选题' || question.type === '判断题') {
                        // 单选题和判断题
                        if (examState.answers[index] === question.answer) {
                            score += question.score;
                        }
                    } else if (question.type === '简答题') {
                        // 简答题只要有内容就得分（实际应用中应该有更复杂的评分逻辑）
                        if (examState.answers[index].trim().length > 0) {
                            score += question.score / 2; // 简答题给一半分数
                        }
                    }
                }
            });

            // 计算用时
            const timeUsedMs = Date.now() - examState.startTime;
            const hours = Math.floor(timeUsedMs / 3600000);
            const minutes = Math.floor((timeUsedMs % 3600000) / 60000);
            const seconds = Math.floor((timeUsedMs % 60000) / 1000);

            // 显示考试结束模态框
            finalScore.textContent = score;
            finalAnswered.textContent = examState.answers.filter(a => a !== null).length;
            timeUsed.textContent = `${hours.toString().padStart(2, '0')}:${minutes.toString().padStart(2, '0')}:${seconds.toString().padStart(2, '0')}`;

            finishModal.style.display = 'flex';
        }

        // 倒计时功能
        function startTimer() {
            setInterval(function () {
                examState.timeRemaining--;

                if (examState.timeRemaining <= 0) {
                    // 时间到，自动提交
                    submitExam();
                    return;
                }

                const hours = Math.floor(examState.timeRemaining / 3600);
                const minutes = Math.floor((examState.timeRemaining % 3600) / 60);
                const seconds = examState.timeRemaining % 60;

                timeDisplay.textContent = `${hours.toString().padStart(2, '0')}:${minutes.toString().padStart(2, '0')}:${seconds.toString().padStart(2, '0')}`;
            }, 1000);
        }

        // 初始化
        function init() {
            initQuestionNavigation();
            showQuestion(0);
            updateProgress();
            startTimer();

            // 添加事件监听器
            prevBtn.addEventListener('click', showPrevQuestion);
            nextBtn.addEventListener('click', showNextQuestion);
            markBtn.addEventListener('click', markQuestion);
            submitBtn.addEventListener('click', showSubmitModal);
            closeModal.addEventListener('click', hideSubmitModal);
            cancelSubmit.addEventListener('click', hideSubmitModal);
            confirmSubmit.addEventListener('click', submitExam);
            reviewBtn.addEventListener('click', () => {
                finishModal.style.display = 'none';
                alert('查看详情功能正在开发中...');
            });
            closeExam.addEventListener('click', () => {
                finishModal.style.display = 'none';
                alert('考试已结束，页面将关闭');
            });

            // 题型过滤事件
            typeFilterBtns.forEach(btn => {
                btn.addEventListener('click', () => {
                    typeFilterBtns.forEach(b => b.classList.remove('active'));
                    btn.classList.add('active');
                    examState.filteredType = btn.dataset.type;
                    applyTypeFilter();
                });
            });
        }

        // 启动应用
        window.onload = init;
    </script>
</body>

</html>